<template>
    <div class="barwrap">
        <van-cell :title="_title" icon="chart-trending-o" />
        <div :id="props.id" 
        style="width: 100%;height: 200px;"
        ></div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import {
    defineExpose,
    defineProps,
    ref
} from "vue";

const _title = ref('');

const props = defineProps({
    id: {
        type: String,
        default: 'main',
    }
});

const updateValue = (params) => {
    const { rawData, title } = params;
    
    _title.value = title;
    var chartDom = document.getElementById(props.id);
    var myChart = echarts.init(chartDom);
    var option;
    const grid = {
        left: 40,
        right: 20,
        top: 50,
        bottom: 20
    };
    option = {
        title: {
            // text: title,
            // subtext: '',
            // left: 'center'
        },
        grid,
        tooltip: {
            trigger: 'item'
        },
        legend: {
            type: 'scroll',
            orient: 'horizontal',
            top: 0
        },
        series: [
            {
                // name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: rawData,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    option && myChart.setOption(option);


}

defineExpose({ updateValue })



</script>

<style lang="scss" scoped>
.barwrap {
    width: 100%;
    display: flex;
    flex-direction: column;

    .title {
        font-size: 16px;
        color: #666;
        font-weight: 400;
        padding: 10px 0;
    }
}
</style>